<template>
	<view class="teamUserInfo">
		<u-navbar title=" " bgColor="#fff" :autoBack="true">
			<view slot="left"><uni-icons type="left" size="16" color="#000"></uni-icons></view>
			<view slot="center" style="color:#000">
				团队详情
			</view>
		</u-navbar>
		<view class="infoCon">
			<view class="customerBox flex_heng">
				<view class="leftBox flex_shu">
					<view class="customerName">
						王斌
					</view>
					<view class="companyBox">
						龙腾嘉旭公司
					</view>
					<view class="job">
						项目经理
					</view>
				</view>
				<u-avatar :src="imgUrl + 'goods.png'" shape="circle" size="58"></u-avatar>
			</view>

			<view class="customerForm">
				<view class="customertitle flex_heng">
					<text>基本信息</text>
					<view class="edit flex_heng">
						修改<u-icon name="edit-pen-fill" color="#333"></u-icon>
					</view>
				</view>

				<view class="formBox">
					<view class="inputBox flex_heng">
						<view class="formItemLeft">
							客户姓名 / 公司名:
						</view>
						<view class="formItemRight">
							<input v-model="userInfo.nickName" placeholder="请输入客户姓名 / 公司名">
						</view>
					</view>
					<u-line></u-line>
					<view class="inputBox flex_heng">
						<view class="formItemLeft">
							客户类型:
						</view>
						<view class="formItemRight">
							<rowMenuDotDotDot :localdata="tabsList" @change="tabChange">
								<text class="placeholderText" v-if="tabName == ''">请选择客户类型</text>
								<text v-else>{{ tabName }}</text>
							</rowMenuDotDotDot>
						</view>
					</view>
					<u-line></u-line>
					<view class="inputBox flex_heng">
						<view class="formItemLeft">
							联系电话:
						</view>
						<view class="formItemRight">
							<input v-model="userInfo.nickName" placeholder="请输入联系电话">
						</view>
					</view>
					<u-line></u-line>
					<view class="inputBox flex_heng">
						<view class="formItemLeft">
							地址:
						</view>
						<view class="formItemRight">
							<input v-model="userInfo.nickName" placeholder="请输入地址">
						</view>
					</view>
					<u-line></u-line>
					<view class="inputBox flex_heng">
						<view class="formItemLeft">
							客户来源:
						</view>
						<view class="formItemRight">
							<input v-model="userInfo.nickName" placeholder="请输入客户来源">
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import rowMenuDotDotDot from '@/components/rudon-rowMenuDotDotDot-left/rudon-rowMenuDotDotDot-left.vue'
	import {
		addTeam,
		putTeam,
		getTeamInfo
	} from '@/api/api.js'
	export default {
		components: {
			rowMenuDotDotDot
		},
		data() {
			return {
				imgUrl: this.$imgUrl,
				tabName: '',
				tabNameTwo: '',
				teamUserInfo: {
					status: '',
					type: ''
				},
				tabsList: [{
						value: 0,
						name: "个人客户"
					},
					{
						value: 1,
						name: "公司客户"
					},
				],
				tabsListTwo: [{
						value: 0,
						name: "潜在客户"
					},
					{
						value: 1,
						name: "意向客户"
					},
					{
						value: 2,
						name: "正式客户"
					},
				],
				form: {
					"address": "",
					"appUserId": "",
					"createBy": "",
					"createTime": "",
					"customerName": "",
					"dadAppUserId": "",
					"phone": "",
					"remark": "",
					"responsibleNickName": "",
					"source": "",
					"status": "",
					"type": "",
				},
				teamUserId: '',
				userInfo: {},
			};
		},
		onLoad(op) {
			if (op.teamUserId) {
				this.teamUserId = op.teamUserId
				console.log(this.teamUserId);
				this.getTeamInfo(this.teamUserId)
			}

			this.userInfo = uni.getStorageSync('userInfo')
		},
		onShow() {},
		methods: {
			getTeamInfo(id) {
				getTeamInfo(id).then(res => {
					if (res.code == 200) {
						this.form = res.data
						this.tabName = this.getTypeName(this.form.type)
						this.tabNameTwo = this.getStatusName(this.form.status)
					}
				})
			},
			tabChange(e) {
				console.log("e:", e);
				this.tabName = e.name;
				this.customerInfo.type = e.value;
			},
			tabChangeTwo(e) {
				console.log("e:", e);
				this.tabNameTwo = e.name;
				this.customerInfo.status = e.value;
			},
			//选择客户
			selectStatus() {

			},

			save() {

				if (!this.form.customerName) {
					uni.showToast({
						title: '请输入客户名称',
						icon: 'none'
					})
					return
				}
				if (!this.form.phone) {
					uni.showToast({
						title: '请输入联系电话',
						icon: 'none'
					})
					return
				}
				if (!this.form.address) {
					uni.showToast({
						title: '请输入地址',
						icon: 'none'
					})
					return
				}
				if (!this.form.source) {
					uni.showToast({
						title: '请输入客户来源',
						icon: 'none'
					})
					return
				}
				if (!this.form.status) {
					uni.showToast({
						title: '请选择客户状态',
						icon: 'none'
					})
					return
				}
				if (!this.form.responsibleNickName) {
					uni.showToast({
						title: '请输入负责人',
						icon: 'none'
					})
					return
				}


				if (this.customerId) {
					putTeam({
						...this.form,
						appUserId: uni.getStorageSync('userInfo').id,
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '修改成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						}
					})
				} else {
					addTeam({
						...this.form,
						appUserId: uni.getStorageSync('userInfo').id,
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '添加成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						}
					})
				}
			},
		},
	}
</script>

<style lang="scss">
	.teamUserInfo {
		min-height: 100vh;
		background-color: #F6F6F6;
		padding: 200rpx 28rpx 0;
		box-sizing: border-box;

		.infoCon {
			width: 100%;
			height: 100%;

			.customerBox {
				width: 100%;
				// height: 132rpx;
				border-radius: 16rpx;
				opacity: 1;
				background: #ffffff;
				// justify-content: flex-start;
				padding: 28rpx;
				box-sizing: border-box;

				.leftBox {
					align-items: flex-start;
					color: #000000;
					font-size: 28rpx;
					font-weight: 500;
					font-family: "Alibaba PuHuiTi 2.0";

					.customerName {}

					.companyBox {
						margin: 20rpx 0;
					}
				}

			}

			.customerForm {
				margin-top: 28rpx;
				color: #000000;
				font-size: 32rpx;
				font-weight: 500;
				font-family: "Alibaba PuHuiTi 2.0";

				.customertitle {
					width: 100%;

					.edit {
						color: #333333;
						font-size: 28rpx;
						font-weight: 400;
					}
				}

				.formBox {
					width: 100%;
					border-radius: 16rpx;
					opacity: 1;
					background: #ffffff;
					margin-top: 24rpx;

					.inputBoxTwo {
						width: 100%;
						// height: 90rpx;
						padding: 0 28rpx;
						box-sizing: border-box;

						.formItemLeft {
							color: #666666;
							font-size: 28rpx;
							font-weight: 400;
						}

						.formItemRight {
							margin-top: 12rpx;

							// position: relative;
							// width: 300rpx;
							::v-deep .u-textarea {
								background-color: #F7F7F7 !important;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}

							::v-deep .u-textarea__field {
								font-size: 26rpx !important;
								color: #131212 !important;
								font-style: normal !important;
								text-transform: none !important;
								font-weight: normal !important;
							}
						}
					}

					.inputBox {
						width: 100%;
						height: 90rpx;
						padding: 0 28rpx;
						box-sizing: border-box;

						.formItemLeft {
							color: #666666;
							font-size: 28rpx;
							font-weight: 400;
						}

						.formItemRight {
							// position: relative;
							// width: 300rpx;

							.placeholderText {
								font-weight: 500;
								font-size: 28rpx;
								color: #999999;
							}

							input {
								height: 52rpx;
								line-height: 52rpx;
								text-align: right;
								font-weight: 500;
								font-size: 28rpx;
								color: #000000;
							}

							.input-placeholder {
								font-weight: 500;
								font-size: 28rpx;
								color: #999999;
							}


							.u-input {
								padding: 0 10rpx !important;
								box-sizing: border-box;
								border: none;
								text-align: right;
							}
						}

					}
				}
			}
		}
	}
</style>